<!--
 * loading-group-04
 *
 * @from    https://whirl.netlify.app/
 * @github  https://github.com/jh3y/whirl
 * @author Junpeng.Li
 * @date 2023-07-18 16-05
-->
<script setup lang="ts">
defineOptions({
  name: 'LoadingGroup04'
})
</script>

<template>
  <div class="container">
    <div class="loading-box loading-01">
      <div class="blades">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-02">
      <div class="book">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-03">
      <div class="building-blocks">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-04">
      <div class="cascade">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-05">
      <div class="circle-path">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-06">
      <div class="coffee">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-07">
      <div class="combine">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-08">
      <div class="combine-two">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-09">
      <div class="cube">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-10">
      <div class="dominoes">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-11">
      <div class="equalizer">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-12">
      <div class="feeder">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-13">
      <div class="flip-to-square">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-14">
      <div class="flip-to-square-random">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-15">
      <div class="flippers">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-16">
      <div class="flippers-alternate">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-17">
      <div class="follow-the-leader">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-18">
      <div class="follow-the-leader-line">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-19">
      <div class="honeycomb">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-20">
      <div class="in-and-out">
        <div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
    <div class="loading-box loading-21">
      <div class="infinity-path">
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-22">
      <div class="meetup">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-23">
      <div class="orbit-star">
        <div>
          <div></div>
        </div>
        <div>
          <div></div>
        </div>
      </div>
    </div>
    <div class="loading-box loading-24">
      <div class="pan-out-circle">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-25">
      <div class="pong">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-26">
      <div class="push-out">
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-27">
      <div class="push-pop">
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-28">
      <div class="reach">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-29">
      <div class="ring-of-stars">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-30">
      <div class="rotating-dots">
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-30">
      <div class="scaling-circle">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-31">
      <div class="scaling-dots">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-32">
      <div class="slide-in">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-33">
      <div class="waterfall">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="loading-box loading-34">
      <div class="grow-fade-dots">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: auto;

  --primary: #fafafa;
  --secondary: #f9690e;

  .loading-box {
    width: 200px;
    height: 200px;
    background-color: #2a2a2a;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    position: relative;
  }

  .loading-01 {
    .blades {
      -webkit-animation: spin 1s infinite linear;
      animation: spin 1s infinite linear;
      height: 20px;
      width: 20px;
    }

    .blades div {
      border: 4px solid transparent;
      border-left-color: var(--primary);
      height: 20px;
      left: 50%;
      position: absolute;
      top: 50%;
      -webkit-transform-origin: top left;
      transform-origin: top left;
      width: 20px;
    }

    .blades div:nth-child(1) {
      -webkit-transform: rotate(72deg) translateY(5px);
      transform: rotate(72deg) translateY(5px);
    }

    .blades div:nth-child(2) {
      -webkit-transform: rotate(144deg) translateY(5px);
      transform: rotate(144deg) translateY(5px);
    }

    .blades div:nth-child(3) {
      -webkit-transform: rotate(216deg) translateY(5px);
      transform: rotate(216deg) translateY(5px);
    }

    .blades div:nth-child(4) {
      -webkit-transform: rotate(288deg) translateY(5px);
      transform: rotate(288deg) translateY(5px);
    }

    .blades div:nth-child(5) {
      -webkit-transform: rotate(360deg) translateY(5px);
      transform: rotate(360deg) translateY(5px);
    }

    @-webkit-keyframes spin {
      to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes spin {
      to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
  }

  .loading-02 {
    @-webkit-keyframes whirl-book {
      0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
      }
      50%,
      80% {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
      }
      90%,
      100% {
        opacity: 0;
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
      }
    }
    @keyframes whirl-book {
      0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
      }
      50%,
      80% {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
      }
      90%,
      100% {
        opacity: 0;
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
      }
    }

    .book {
      height: 30px;
      position: relative;
      width: 30px;
      -webkit-perspective: 60px;
      perspective: 60px;
    }

    .book div {
      -webkit-animation: whirl-book 2s infinite;
      animation: whirl-book 2s infinite;
      background: var(--primary);
      height: 100%;
      position: absolute;
      left: 50%;
      -webkit-transform-origin: left;
      transform-origin: left;
      width: 100%;
    }

    .book div:nth-child(1) {
      -webkit-animation-delay: 0.15s;
      animation-delay: 0.15s;
    }

    .book div:nth-child(2) {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }

    .book div:nth-child(3) {
      -webkit-animation-delay: 0.45s;
      animation-delay: 0.45s;
    }

    .book div:nth-child(4) {
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
    }

    .book div:nth-child(5) {
      -webkit-animation-delay: 0.75s;
      animation-delay: 0.75s;
    }
  }

  .loading-03 {
    @-webkit-keyframes building-blocks {
      0%,
      20% {
        opacity: 0;
        -webkit-transform: translateY(-300%);
        transform: translateY(-300%);
      }
      30%,
      70% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      90%,
      100% {
        opacity: 0;
        -webkit-transform: translateY(300%);
        transform: translateY(300%);
      }
    }
    @keyframes building-blocks {
      0%,
      20% {
        opacity: 0;
        -webkit-transform: translateY(-300%);
        transform: translateY(-300%);
      }
      30%,
      70% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      90%,
      100% {
        opacity: 0;
        -webkit-transform: translateY(300%);
        transform: translateY(300%);
      }
    }

    .building-blocks {
      position: relative;
    }

    .building-blocks div {
      height: 20px;
      position: absolute;
      width: 20px;
    }

    .building-blocks div:after {
      -webkit-animation: building-blocks 2.1s ease infinite backwards;
      animation: building-blocks 2.1s ease infinite backwards;
      background: var(--primary);
      content: '';
      display: block;
      height: 20px;
      width: 20px;
    }

    .building-blocks div:nth-child(1) {
      -webkit-transform: translate(-50%, -50%) translate(60%, 120%);
      transform: translate(-50%, -50%) translate(60%, 120%);
    }

    .building-blocks div:nth-child(2) {
      -webkit-transform: translate(-50%, -50%) translate(-60%, 120%);
      transform: translate(-50%, -50%) translate(-60%, 120%);
    }

    .building-blocks div:nth-child(3) {
      -webkit-transform: translate(-50%, -50%) translate(120%, 0);
      transform: translate(-50%, -50%) translate(120%, 0);
    }

    .building-blocks div:nth-child(4) {
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    .building-blocks div:nth-child(5) {
      -webkit-transform: translate(-50%, -50%) translate(-120%, 0);
      transform: translate(-50%, -50%) translate(-120%, 0);
    }

    .building-blocks div:nth-child(6) {
      -webkit-transform: translate(-50%, -50%) translate(60%, -120%);
      transform: translate(-50%, -50%) translate(60%, -120%);
    }

    .building-blocks div:nth-child(7) {
      -webkit-transform: translate(-50%, -50%) translate(-60%, -120%);
      transform: translate(-50%, -50%) translate(-60%, -120%);
    }

    .building-blocks div:nth-child(1):after {
      -webkit-animation-delay: 0.15s;
      animation-delay: 0.15s;
    }

    .building-blocks div:nth-child(2):after {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }

    .building-blocks div:nth-child(3):after {
      -webkit-animation-delay: 0.45s;
      animation-delay: 0.45s;
    }

    .building-blocks div:nth-child(4):after {
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
    }

    .building-blocks div:nth-child(5):after {
      -webkit-animation-delay: 0.75s;
      animation-delay: 0.75s;
    }

    .building-blocks div:nth-child(6):after {
      -webkit-animation-delay: 0.9s;
      animation-delay: 0.9s;
    }

    .building-blocks div:nth-child(7):after {
      -webkit-animation-delay: 1.05s;
      animation-delay: 1.05s;
    }
  }

  .loading-04 {
    @-webkit-keyframes cascade {
      0% {
        opacity: 0;
        -webkit-transform: translateY(-250%);
        transform: translateY(-250%);
      }
      30%,
      60% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      100% {
        opacity: 0;
        -webkit-transform: translateY(250%);
        transform: translateY(250%);
      }
    }
    @keyframes cascade {
      0% {
        opacity: 0;
        -webkit-transform: translateY(-250%);
        transform: translateY(-250%);
      }
      30%,
      60% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      100% {
        opacity: 0;
        -webkit-transform: translateY(250%);
        transform: translateY(250%);
      }
    }

    .cascade {
      height: 20px;
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, 20px);
      grid-gap: 5px;
    }

    .cascade div {
      background: var(--primary);
    }

    .cascade div:nth-child(1) {
      -webkit-animation: cascade 1.5s 0.15s ease infinite backwards;
      animation: cascade 1.5s 0.15s ease infinite backwards;
    }

    .cascade div:nth-child(2) {
      -webkit-animation: cascade 1.5s 0.3s ease infinite backwards;
      animation: cascade 1.5s 0.3s ease infinite backwards;
    }

    .cascade div:nth-child(3) {
      -webkit-animation: cascade 1.5s 0.45s ease infinite backwards;
      animation: cascade 1.5s 0.45s ease infinite backwards;
    }

    .cascade div:nth-child(4) {
      -webkit-animation: cascade 1.5s 0.6s ease infinite backwards;
      animation: cascade 1.5s 0.6s ease infinite backwards;
    }

    .cascade div:nth-child(5) {
      -webkit-animation: cascade 1.5s 0.75s ease infinite backwards;
      animation: cascade 1.5s 0.75s ease infinite backwards;
    }
  }

  .loading-05 {
    .circle-path {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 10px;
      width: 10px;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    .circle-path div {
      background: var(--primary);
      border-radius: 100%;
      height: 10px;
      position: absolute;
      width: 10px;
      -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 30px);
      transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 30px);
    }

    .circle-path div:nth-child(11) {
      background: var(--secondary);
      -webkit-animation: path 0.5s infinite steps(10);
      animation: path 0.5s infinite steps(10);
    }

    .circle-path div:nth-child(1) {
      --rotation: 36;
    }

    .circle-path div:nth-child(2) {
      --rotation: 72;
    }

    .circle-path div:nth-child(3) {
      --rotation: 108;
    }

    .circle-path div:nth-child(4) {
      --rotation: 144;
    }

    .circle-path div:nth-child(5) {
      --rotation: 180;
    }

    .circle-path div:nth-child(6) {
      --rotation: 216;
    }

    .circle-path div:nth-child(7) {
      --rotation: 252;
    }

    .circle-path div:nth-child(8) {
      --rotation: 288;
    }

    .circle-path div:nth-child(9) {
      --rotation: 324;
    }

    .circle-path div:nth-child(10) {
      --rotation: 360;
    }

    @-webkit-keyframes path {
      from {
        -webkit-transform: rotate(0deg) translate(0, 30px) scale(1.5);
        transform: rotate(0deg) translate(0, 30px) scale(1.5);
      }
      to {
        -webkit-transform: rotate(360deg) translate(0, 30px) scale(1.5);
        transform: rotate(360deg) translate(0, 30px) scale(1.5);
      }
    }

    @keyframes path {
      from {
        -webkit-transform: rotate(0deg) translate(0, 30px) scale(1.5);
        transform: rotate(0deg) translate(0, 30px) scale(1.5);
      }
      to {
        -webkit-transform: rotate(360deg) translate(0, 30px) scale(1.5);
        transform: rotate(360deg) translate(0, 30px) scale(1.5);
      }
    }
  }

  .loading-06 {
    @-webkit-keyframes coffee {
      100% {
        opacity: 0;
        -webkit-transform: translateY(-200%);
        transform: translateY(-200%);
      }
    }
    @keyframes coffee {
      100% {
        opacity: 0;
        -webkit-transform: translateY(-200%);
        transform: translateY(-200%);
      }
    }

    .coffee {
      background: #fff;
      display: grid;
      border-radius: 4px;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 1fr;
      height: 40px;
      position: relative;
      width: 40px;
      padding: 2px;
      justify-items: center;
    }

    .coffee:before {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      content: '';
      height: 26px;
      width: 20px;
      border: 4px solid #fff;
      position: absolute;
      top: 50%;
      margin-top: -13px;
      margin-left: -10px;
      left: 100%;
      border-radius: 4px;
    }

    .coffee div {
      height: 20px;
      width: 8px;
      background: #fff;
      opacity: .3;
      -webkit-animation: coffee 2s infinite;
      animation: coffee 2s infinite;
    }

    .coffee div:nth-child(1) {
      -webkit-animation-delay: 0.4s;
      animation-delay: 0.4s;
    }

    .coffee div:nth-child(2) {
      -webkit-animation-delay: 1s;
      animation-delay: 1s;
    }

    .coffee div:nth-child(3) {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }
  }

  .loading-07 {
    @-webkit-keyframes combine {
      25% {
        -webkit-transform: translate(0, -80%);
        transform: translate(0, -80%);
      }
      75% {
        -webkit-transform: translate(0, 50%);
        transform: translate(0, 50%);
      }
    }
    @keyframes combine {
      25% {
        -webkit-transform: translate(0, -80%);
        transform: translate(0, -80%);
      }
      75% {
        -webkit-transform: translate(0, 50%);
        transform: translate(0, 50%);
      }
    }

    .combine {
      height: 30px;
      position: relative;
      width: 30px;
    }

    .combine div {
      --rotation: 45;
      position: absolute;
      -webkit-transform: rotate(calc(var(--rotation) * 1deg));
      transform: rotate(calc(var(--rotation) * 1deg));
    }

    .combine div:after {
      -webkit-animation: combine .85s infinite ease;
      animation: combine .85s infinite ease;
      border: 15px solid transparent;
      border-top-color: var(--primary);
      content: '';
      display: block;
      height: 30px;
      width: 30px;
      box-sizing: border-box;
    }

    .combine div:nth-child(2) {
      --rotation: 135;
    }

    .combine div:nth-child(3) {
      --rotation: 225;
    }

    .combine div:nth-child(4) {
      --rotation: 315;
    }
  }

  .loading-08 {
    @-webkit-keyframes combine-two {
      25% {
        -webkit-transform: translate(0, -100%);
        transform: translate(0, -100%);
      }
      50% {
        -webkit-transform: translate(0, 50%);
        transform: translate(0, 50%);
      }
      75% {
        -webkit-transform: translate(0, 150%);
        transform: translate(0, 150%);
      }
    }
    @keyframes combine-two {
      25% {
        -webkit-transform: translate(0, -100%);
        transform: translate(0, -100%);
      }
      50% {
        -webkit-transform: translate(0, 50%);
        transform: translate(0, 50%);
      }
      75% {
        -webkit-transform: translate(0, 150%);
        transform: translate(0, 150%);
      }
    }

    .combine-two {
      height: 30px;
      position: relative;
      width: 30px;
    }

    .combine-two div {
      --rotation: 45;
      position: absolute;
      -webkit-transform: rotate(calc(var(--rotation) * 1deg));
      transform: rotate(calc(var(--rotation) * 1deg));
    }

    .combine-two div:after {
      -webkit-animation: combine-two 1.5s infinite ease;
      animation: combine-two 1.5s infinite ease;
      border: 15px solid transparent;
      border-top-color: var(--primary);
      content: '';
      display: block;
      height: 30px;
      width: 30px;
      box-sizing: border-box;
    }

    .combine-two div:nth-child(2) {
      --rotation: 135;
    }

    .combine-two div:nth-child(3) {
      --rotation: 225;
    }

    .combine-two div:nth-child(4) {
      --rotation: 315;
    }
  }

  .loading-09 {
    @-webkit-keyframes cube {
      0% {
        -webkit-transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
        transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
      }
      50% {
        -webkit-transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
        transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
      }
      100% {
        -webkit-transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
        transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
      }
    }
    @keyframes cube {
      0% {
        -webkit-transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
        transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
      }
      50% {
        -webkit-transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
        transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
      }
      100% {
        -webkit-transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
        transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
      }
    }

    .cube {
      -webkit-animation: cube 2s infinite ease;
      animation: cube 2s infinite ease;
      height: 40px;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      width: 40px;
    }

    .cube div {
      background-color: rgba(255, 255, 255, 0.25);
      height: 100%;
      position: absolute;
      width: 100%;
      border: 2px solid white;
    }

    .cube div:nth-of-type(1) {
      -webkit-transform: translateZ(-20px) rotateY(180deg);
      transform: translateZ(-20px) rotateY(180deg);
    }

    .cube div:nth-of-type(2) {
      -webkit-transform: rotateY(-270deg) translateX(50%);
      transform: rotateY(-270deg) translateX(50%);
      -webkit-transform-origin: top right;
      transform-origin: top right;
    }

    .cube div:nth-of-type(3) {
      -webkit-transform: rotateY(270deg) translateX(-50%);
      transform: rotateY(270deg) translateX(-50%);
      -webkit-transform-origin: center left;
      transform-origin: center left;
    }

    .cube div:nth-of-type(4) {
      -webkit-transform: rotateX(90deg) translateY(-50%);
      transform: rotateX(90deg) translateY(-50%);
      -webkit-transform-origin: top center;
      transform-origin: top center;
    }

    .cube div:nth-of-type(5) {
      -webkit-transform: rotateX(-90deg) translateY(50%);
      transform: rotateX(-90deg) translateY(50%);
      -webkit-transform-origin: bottom center;
      transform-origin: bottom center;
    }

    .cube div:nth-of-type(6) {
      -webkit-transform: translateZ(20px);
      transform: translateZ(20px);
    }
  }

  .loading-10 {
    @-webkit-keyframes dominoes {
      0% {
        opacity: 0;
      }
      20% {
        opacity: 1;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      60% {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg));
        transform: rotate(calc(var(--rotation) * 1deg));
      }
      90%,
      100% {
        opacity: 0;
        -webkit-transform: rotate(calc(var(--rotation) * 1deg));
        transform: rotate(calc(var(--rotation) * 1deg));
      }
    }
    @keyframes dominoes {
      0% {
        opacity: 0;
      }
      20% {
        opacity: 1;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      60% {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg));
        transform: rotate(calc(var(--rotation) * 1deg));
      }
      90%,
      100% {
        opacity: 0;
        -webkit-transform: rotate(calc(var(--rotation) * 1deg));
        transform: rotate(calc(var(--rotation) * 1deg));
      }
    }

    .dominoes {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: repeat(5, 10px);
      height: 40px;
    }

    .dominoes div {
      --rotation: 68;
      background-color: var(--primary);
      opacity: 0;
      -webkit-transform-origin: bottom right;
      transform-origin: bottom right;
    }

    .dominoes div:nth-child(1) {
      -webkit-animation: dominoes 1s 0.2s infinite ease;
      animation: dominoes 1s 0.2s infinite ease;
    }

    .dominoes div:nth-child(2) {
      -webkit-animation: dominoes 1s 0.4s infinite ease;
      animation: dominoes 1s 0.4s infinite ease;
    }

    .dominoes div:nth-child(3) {
      -webkit-animation: dominoes 1s 0.6s infinite ease;
      animation: dominoes 1s 0.6s infinite ease;
    }

    .dominoes div:nth-child(4) {
      -webkit-animation: dominoes 1s 0.8s infinite ease;
      animation: dominoes 1s 0.8s infinite ease;
    }

    .dominoes div:nth-child(5) {
      -webkit-animation: dominoes 1s 1s infinite ease;
      animation: dominoes 1s 1s infinite ease;
      --rotation: 90;
    }
  }

  .loading-11 {
    .equalizer {
      display: grid;
      grid-gap: 4px;
      grid-template-columns: repeat(5, 10px);
      height: 50px;
    }

    .equalizer div {
      background: -webkit-gradient(linear, left bottom, left top, from(green), color-stop(yellow), to(red));
      background: linear-gradient(0deg, green, yellow, red);
      height: 100%;
      -webkit-animation: equalize 2s infinite;
      animation: equalize 2s infinite;
    }

    .equalizer div:nth-child(1) {
      -webkit-animation-delay: -0.68333s;
      animation-delay: -0.68333s;
    }

    .equalizer div:nth-child(2) {
      -webkit-animation-delay: -0.2s;
      animation-delay: -0.2s;
    }

    .equalizer div:nth-child(3) {
      -webkit-animation-delay: -0.85s;
      animation-delay: -0.85s;
    }

    .equalizer div:nth-child(4) {
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }

    .equalizer div:nth-child(5) {
      -webkit-animation-delay: -0.71667s;
      animation-delay: -0.71667s;
    }

    @-webkit-keyframes equalize {
      0%, 100% {
        -webkit-clip-path: inset(65% 0 0 0);
        clip-path: inset(65% 0 0 0);
      }
      10% {
        -webkit-clip-path: inset(67% 0 0 0);
        clip-path: inset(67% 0 0 0);
      }
      20% {
        -webkit-clip-path: inset(40% 0 0 0);
        clip-path: inset(40% 0 0 0);
      }
      30% {
        -webkit-clip-path: inset(75% 0 0 0);
        clip-path: inset(75% 0 0 0);
      }
      40% {
        -webkit-clip-path: inset(41% 0 0 0);
        clip-path: inset(41% 0 0 0);
      }
      50% {
        -webkit-clip-path: inset(20% 0 0 0);
        clip-path: inset(20% 0 0 0);
      }
      60% {
        -webkit-clip-path: inset(22% 0 0 0);
        clip-path: inset(22% 0 0 0);
      }
      70% {
        -webkit-clip-path: inset(11% 0 0 0);
        clip-path: inset(11% 0 0 0);
      }
      80% {
        -webkit-clip-path: inset(57% 0 0 0);
        clip-path: inset(57% 0 0 0);
      }
      90% {
        -webkit-clip-path: inset(28% 0 0 0);
        clip-path: inset(28% 0 0 0);
      }
    }

    @keyframes equalize {
      0%, 100% {
        -webkit-clip-path: inset(65% 0 0 0);
        clip-path: inset(65% 0 0 0);
      }
      10% {
        -webkit-clip-path: inset(67% 0 0 0);
        clip-path: inset(67% 0 0 0);
      }
      20% {
        -webkit-clip-path: inset(40% 0 0 0);
        clip-path: inset(40% 0 0 0);
      }
      30% {
        -webkit-clip-path: inset(75% 0 0 0);
        clip-path: inset(75% 0 0 0);
      }
      40% {
        -webkit-clip-path: inset(41% 0 0 0);
        clip-path: inset(41% 0 0 0);
      }
      50% {
        -webkit-clip-path: inset(20% 0 0 0);
        clip-path: inset(20% 0 0 0);
      }
      60% {
        -webkit-clip-path: inset(22% 0 0 0);
        clip-path: inset(22% 0 0 0);
      }
      70% {
        -webkit-clip-path: inset(11% 0 0 0);
        clip-path: inset(11% 0 0 0);
      }
      80% {
        -webkit-clip-path: inset(57% 0 0 0);
        clip-path: inset(57% 0 0 0);
      }
      90% {
        -webkit-clip-path: inset(28% 0 0 0);
        clip-path: inset(28% 0 0 0);
      }
    }
  }

  .loading-12 {
    @-webkit-keyframes fed {
      0% {
        opacity: 0;
        -webkit-transform: translateX(-500%);
        transform: translateX(-500%);
      }
      30%,
      70% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
      50% {
        -webkit-transform: translateX(0) scale(2.5);
        transform: translateX(0) scale(2.5);
      }
      40%,
      60% {
        -webkit-transform: translateX(0) scale(1.5);
        transform: translateX(0) scale(1.5);
      }
      100% {
        opacity: 0;
        -webkit-transform: translateX(500%);
        transform: translateX(500%);
      }
    }
    @keyframes fed {
      0% {
        opacity: 0;
        -webkit-transform: translateX(-500%);
        transform: translateX(-500%);
      }
      30%,
      70% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
      50% {
        -webkit-transform: translateX(0) scale(2.5);
        transform: translateX(0) scale(2.5);
      }
      40%,
      60% {
        -webkit-transform: translateX(0) scale(1.5);
        transform: translateX(0) scale(1.5);
      }
      100% {
        opacity: 0;
        -webkit-transform: translateX(500%);
        transform: translateX(500%);
      }
    }

    @-webkit-keyframes feed {
      0% {
        opacity: 0;
        -webkit-transform: translateX(-500%);
        transform: translateX(-500%);
      }
      40% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
      100% {
        opacity: 0;
        -webkit-transform: translateX(500%);
        transform: translateX(500%);
      }
    }

    @keyframes feed {
      0% {
        opacity: 0;
        -webkit-transform: translateX(-500%);
        transform: translateX(-500%);
      }
      40% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
      100% {
        opacity: 0;
        -webkit-transform: translateX(500%);
        transform: translateX(500%);
      }
    }

    .feeder {
      height: 20px;
      position: relative;
      width: 20px;
    }

    .feeder div {
      -webkit-animation-duration: 3s;
      animation-duration: 3s;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-name: fed;
      animation-name: fed;
      -webkit-animation-fill-mode: backwards;
      animation-fill-mode: backwards;
      -webkit-animation-delay: calc(var(--delay) * 1s);
      animation-delay: calc(var(--delay) * 1s);
      background-color: var(--primary);
      border-radius: 100%;
      height: 100%;
      position: absolute;
      width: 100%;
    }

    .feeder div:nth-child(2), .feeder div:nth-child(3) {
      -webkit-animation-name: feed;
      animation-name: feed;
    }

    .feeder div:nth-child(2) {
      --delay: .25;
    }

    .feeder div:nth-child(3) {
      --delay: .5;
    }
  }

  .loading-13 {
    @-webkit-keyframes flip-to-square {
      0% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
      }
      50%,
      75% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
      }
      100% {
        opacity: 0;
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
      }
    }
    @keyframes flip-to-square {
      0% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
      }
      50%,
      75% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
      }
      100% {
        opacity: 0;
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
      }
    }

    .flip-to-square {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      height: 60px;
      width: 60px;
    }

    .flip-to-square div {
      -webkit-animation: flip-to-square 1.5s calc(var(--delay) * 1s) infinite backwards;
      animation: flip-to-square 1.5s calc(var(--delay) * 1s) infinite backwards;
      background-color: var(--primary);
    }

    .flip-to-square div:nth-child(1) {
      --delay: 0.1;
    }

    .flip-to-square div:nth-child(2) {
      --delay: 0.2;
    }

    .flip-to-square div:nth-child(3) {
      --delay: 0.3;
    }

    .flip-to-square div:nth-child(4) {
      --delay: 0.4;
    }

    .flip-to-square div:nth-child(5) {
      --delay: 0.5;
    }

    .flip-to-square div:nth-child(6) {
      --delay: 0.6;
    }

    .flip-to-square div:nth-child(7) {
      --delay: 0.7;
    }

    .flip-to-square div:nth-child(8) {
      --delay: 0.8;
    }

    .flip-to-square div:nth-child(9) {
      --delay: 0.9;
    }
  }

  .loading-14 {
    @-webkit-keyframes flip-to-square-random {
      0% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
      }
      50%,
      75% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
      }
      100% {
        opacity: 0;
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
      }
    }
    @keyframes flip-to-square-random {
      0% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
      }
      50%,
      75% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
      }
      100% {
        opacity: 0;
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
      }
    }

    .flip-to-square-random {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      height: 60px;
      width: 60px;
    }

    .flip-to-square-random div {
      -webkit-animation: flip-to-square-random 1.5s calc(var(--delay) * 1s) infinite backwards;
      animation: flip-to-square-random 1.5s calc(var(--delay) * 1s) infinite backwards;
      background-color: var(--primary);
    }

    .flip-to-square-random div:nth-child(1) {
      --delay: 0.1;
    }

    .flip-to-square-random div:nth-child(2) {
      --delay: 0.02;
    }

    .flip-to-square-random div:nth-child(3) {
      --delay: 0.12;
    }

    .flip-to-square-random div:nth-child(4) {
      --delay: 0.02;
    }

    .flip-to-square-random div:nth-child(5) {
      --delay: 0.02;
    }

    .flip-to-square-random div:nth-child(6) {
      --delay: 0.12;
    }

    .flip-to-square-random div:nth-child(7) {
      --delay: 0.18;
    }

    .flip-to-square-random div:nth-child(8) {
      --delay: 0.16;
    }

    .flip-to-square-random div:nth-child(9) {
      --delay: 0.14;
    }
  }

  .loading-15 {
    @-webkit-keyframes flippers {
      0% {
        -webkit-transform: perspective(40px) rotateY(-180deg);
        transform: perspective(40px) rotateY(-180deg);
      }
      50% {
        -webkit-transform: perspective(40px) rotateY(0deg);
        transform: perspective(40px) rotateY(0deg);
      }
    }
    @keyframes flippers {
      0% {
        -webkit-transform: perspective(40px) rotateY(-180deg);
        transform: perspective(40px) rotateY(-180deg);
      }
      50% {
        -webkit-transform: perspective(40px) rotateY(0deg);
        transform: perspective(40px) rotateY(0deg);
      }
    }

    .flippers {
      height: 20px;
      display: grid;
      grid-template-columns: repeat(5, 20px);
      grid-gap: 5px;
    }

    .flippers div {
      -webkit-animation: flippers calc(1.25 * 1s) calc(var(--delay) * 1s) infinite ease;
      animation: flippers calc(1.25 * 1s) calc(var(--delay) * 1s) infinite ease;
      background-color: var(--primary);
    }

    .flippers div:nth-of-type(1) {
      --delay: 0.25;
    }

    .flippers div:nth-of-type(2) {
      --delay: 0.5;
    }

    .flippers div:nth-of-type(3) {
      --delay: 0.75;
    }

    .flippers div:nth-of-type(4) {
      --delay: 1;
    }

    .flippers div:nth-of-type(5) {
      --delay: 1.25;
    }
  }

  .loading-16 {
    @-webkit-keyframes flippers {
      0% {
        -webkit-transform: perspective(40px) rotateY(-180deg);
        transform: perspective(40px) rotateY(-180deg);
      }
      50% {
        -webkit-transform: perspective(40px) rotateY(0deg);
        transform: perspective(40px) rotateY(0deg);
      }
    }
    @keyframes flippers {
      0% {
        -webkit-transform: perspective(40px) rotateY(-180deg);
        transform: perspective(40px) rotateY(-180deg);
      }
      50% {
        -webkit-transform: perspective(40px) rotateY(0deg);
        transform: perspective(40px) rotateY(0deg);
      }
    }

    @-webkit-keyframes flippers-alternate {
      0% {
        -webkit-transform: perspective(40px) rotateY(180deg);
        transform: perspective(40px) rotateY(180deg);
      }
      50% {
        -webkit-transform: perspective(40px) rotateY(0deg);
        transform: perspective(40px) rotateY(0deg);
      }
    }

    @keyframes flippers-alternate {
      0% {
        -webkit-transform: perspective(40px) rotateY(180deg);
        transform: perspective(40px) rotateY(180deg);
      }
      50% {
        -webkit-transform: perspective(40px) rotateY(0deg);
        transform: perspective(40px) rotateY(0deg);
      }
    }

    .flippers-alternate {
      height: 20px;
      display: grid;
      grid-template-columns: repeat(5, 20px);
      grid-gap: 5px;
    }

    .flippers-alternate div {
      background-color: var(--primary);
    }

    .flippers-alternate div:nth-of-type(1) {
      -webkit-animation: flippers-alternate 1.25s 0.25s infinite ease;
      animation: flippers-alternate 1.25s 0.25s infinite ease;
    }

    .flippers-alternate div:nth-of-type(2) {
      -webkit-animation: flippers 1.25s 0.5s infinite ease;
      animation: flippers 1.25s 0.5s infinite ease;
    }

    .flippers-alternate div:nth-of-type(3) {
      -webkit-animation: flippers-alternate 1.25s 0.75s infinite ease;
      animation: flippers-alternate 1.25s 0.75s infinite ease;
    }

    .flippers-alternate div:nth-of-type(4) {
      -webkit-animation: flippers 1.25s 1s infinite ease;
      animation: flippers 1.25s 1s infinite ease;
    }

    .flippers-alternate div:nth-of-type(5) {
      -webkit-animation: flippers-alternate 1.25s 1.25s infinite ease;
      animation: flippers-alternate 1.25s 1.25s infinite ease;
    }
  }

  .loading-17 {
    @-webkit-keyframes follow-the-leader {
      0% {
        -webkit-transform: rotate(0deg) translateY(-200%);
        transform: rotate(0deg) translateY(-200%);
      }
      60%,
      100% {
        -webkit-transform: rotate(360deg) translateY(-200%);
        transform: rotate(360deg) translateY(-200%);
      }
    }
    @keyframes follow-the-leader {
      0% {
        -webkit-transform: rotate(0deg) translateY(-200%);
        transform: rotate(0deg) translateY(-200%);
      }
      60%,
      100% {
        -webkit-transform: rotate(360deg) translateY(-200%);
        transform: rotate(360deg) translateY(-200%);
      }
    }

    .follow-the-leader {
      height: 14px;
      position: relative;
      width: 14px;
    }

    .follow-the-leader div {
      -webkit-animation: follow-the-leader 1.875s infinite backwards;
      animation: follow-the-leader 1.875s infinite backwards;
      background-color: #ffffff;
      border-radius: 100%;
      height: 100%;
      position: absolute;
      width: 100%;
    }

    .follow-the-leader div:nth-child(1) {
      -webkit-animation-delay: 0.15s;
      animation-delay: 0.15s;
      background-color: rgba(255, 255, 255, 0.9);
    }

    .follow-the-leader div:nth-child(2) {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
      background-color: rgba(255, 255, 255, 0.8);
    }

    .follow-the-leader div:nth-child(3) {
      -webkit-animation-delay: 0.45s;
      animation-delay: 0.45s;
      background-color: rgba(255, 255, 255, 0.7);
    }

    .follow-the-leader div:nth-child(4) {
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
      background-color: rgba(255, 255, 255, 0.6);
    }

    .follow-the-leader div:nth-child(5) {
      -webkit-animation-delay: 0.75s;
      animation-delay: 0.75s;
      background-color: rgba(255, 255, 255, 0.5);
    }
  }

  .loading-18 {
    @-webkit-keyframes follow-the-leader {
      0% {
        -webkit-transform: rotate(0deg) translateY(-200%);
        transform: rotate(0deg) translateY(-200%);
      }
      60%,
      100% {
        -webkit-transform: rotate(360deg) translateY(-200%);
        transform: rotate(360deg) translateY(-200%);
      }
    }
    @keyframes follow-the-leader {
      0% {
        -webkit-transform: rotate(0deg) translateY(-200%);
        transform: rotate(0deg) translateY(-200%);
      }
      60%,
      100% {
        -webkit-transform: rotate(360deg) translateY(-200%);
        transform: rotate(360deg) translateY(-200%);
      }
    }

    .follow-the-leader-line {
      height: 14px;
      position: relative;
      width: 14px;
    }

    .follow-the-leader-line div {
      -webkit-animation: follow-the-leader 1.25s infinite backwards;
      animation: follow-the-leader 1.25s infinite backwards;
      background-color: #ffffff;
      border-radius: 100%;
      height: 100%;
      width: 100%;
    }

    .follow-the-leader-line div:nth-child(1) {
      -webkit-animation-delay: 0.15s;
      animation-delay: 0.15s;
      background-color: rgba(255, 255, 255, 0.9);
    }

    .follow-the-leader-line div:nth-child(2) {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
      background-color: rgba(255, 255, 255, 0.8);
    }

    .follow-the-leader-line div:nth-child(3) {
      -webkit-animation-delay: 0.45s;
      animation-delay: 0.45s;
      background-color: rgba(255, 255, 255, 0.7);
    }

    .follow-the-leader-line div:nth-child(4) {
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
      background-color: rgba(255, 255, 255, 0.6);
    }

    .follow-the-leader-line div:nth-child(5) {
      -webkit-animation-delay: 0.75s;
      animation-delay: 0.75s;
      background-color: rgba(255, 255, 255, 0.5);
    }
  }

  .loading-19 {
    @-webkit-keyframes honeycomb {
      0%,
      20%,
      80%,
      100% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
      }
      30%,
      70% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }
    @keyframes honeycomb {
      0%,
      20%,
      80%,
      100% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
      }
      30%,
      70% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    .honeycomb {
      height: 24px;
      position: relative;
      width: 24px;
    }

    .honeycomb div {
      -webkit-animation: honeycomb 2.1s infinite backwards;
      animation: honeycomb 2.1s infinite backwards;
      background: var(--primary);
      height: 12px;
      margin-top: 6px;
      position: absolute;
      width: 24px;
    }

    .honeycomb div:after, .honeycomb div:before {
      content: '';
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
      position: absolute;
      left: 0;
      right: 0;
    }

    .honeycomb div:after {
      top: -6px;
      border-bottom: 6px solid var(--primary);
    }

    .honeycomb div:before {
      bottom: -6px;
      border-top: 6px solid var(--primary);
    }

    .honeycomb div:nth-child(1) {
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      left: -28px;
      top: 0;
    }

    .honeycomb div:nth-child(2) {
      -webkit-animation-delay: 0.1s;
      animation-delay: 0.1s;
      left: -14px;
      top: 22px;
    }

    .honeycomb div:nth-child(3) {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
      left: 14px;
      top: 22px;
    }

    .honeycomb div:nth-child(4) {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
      left: 28px;
      top: 0;
    }

    .honeycomb div:nth-child(5) {
      -webkit-animation-delay: 0.4s;
      animation-delay: 0.4s;
      left: 14px;
      top: -22px;
    }

    .honeycomb div:nth-child(6) {
      -webkit-animation-delay: 0.5s;
      animation-delay: 0.5s;
      left: -14px;
      top: -22px;
    }

    .honeycomb div:nth-child(7) {
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
      left: 0;
      top: 0;
    }
  }

  .loading-20 {
    @-webkit-keyframes in-and-out {
      0%, 30% {
        -webkit-transform: rotate(calc(var(--offset) * -1deg));
        transform: rotate(calc(var(--offset) * -1deg));
      }
      70%, 100% {
        -webkit-transform: rotate(calc(var(--offset) * 1deg));
        transform: rotate(calc(var(--offset) * 1deg));
      }
    }
    @keyframes in-and-out {
      0%, 30% {
        -webkit-transform: rotate(calc(var(--offset) * -1deg));
        transform: rotate(calc(var(--offset) * -1deg));
      }
      70%, 100% {
        -webkit-transform: rotate(calc(var(--offset) * 1deg));
        transform: rotate(calc(var(--offset) * 1deg));
      }
    }

    @-webkit-keyframes in-and-out-two {
      0%, 30% {
        -webkit-transform: rotate(calc(var(--offset) * 1deg));
        transform: rotate(calc(var(--offset) * 1deg));
      }
      70%, 100% {
        -webkit-transform: rotate(calc(var(--offset) * -1deg));
        transform: rotate(calc(var(--offset) * -1deg));
      }
    }

    @keyframes in-and-out-two {
      0%, 30% {
        -webkit-transform: rotate(calc(var(--offset) * 1deg));
        transform: rotate(calc(var(--offset) * 1deg));
      }
      70%, 100% {
        -webkit-transform: rotate(calc(var(--offset) * -1deg));
        transform: rotate(calc(var(--offset) * -1deg));
      }
    }

    @-webkit-keyframes in-and-out-children {
      0%, 50% {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px);
        transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px);
      }
      80%, 100% {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px);
        transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px);
      }
    }

    @keyframes in-and-out-children {
      0%, 50% {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px);
        transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px);
      }
      80%, 100% {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px);
        transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px);
      }
    }

    @-webkit-keyframes in-and-out-two-children {
      0%, 50% {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px);
        transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px);
      }
      80%, 100% {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px);
        transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px);
      }
    }

    @keyframes in-and-out-two-children {
      0%, 50% {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px);
        transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 40px);
      }
      80%, 100% {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px);
        transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 15px);
      }
    }

    .in-and-out {
      --offset: 18;
    }

    .in-and-out > div {
      --radius: 30;
      --size: 10;
      height: calc(var(--size) * 1px);
      width: calc(var(--size) * 1px);
      position: absolute;
    }

    .in-and-out > div:nth-of-type(1) {
      --multiplier: 1;
      -webkit-animation: in-and-out 1s infinite ease both;
      animation: in-and-out 1s infinite ease both;
    }

    .in-and-out > div:nth-of-type(1) div {
      -webkit-animation: in-and-out-children 1s infinite ease;
      animation: in-and-out-children 1s infinite ease;
    }

    .in-and-out > div:nth-of-type(2) {
      --multiplier: 2;
      -webkit-animation: in-and-out-two 1s infinite ease both;
      animation: in-and-out-two 1s infinite ease both;
    }

    .in-and-out > div:nth-of-type(2) div {
      -webkit-animation: in-and-out-two-children 1s infinite ease;
      animation: in-and-out-two-children 1s infinite ease;
    }

    .in-and-out div div {
      background: var(--primary);
      border-radius: 100%;
      height: 100%;
      position: absolute;
      width: 100%;
    }

    .in-and-out div div:nth-child(1) {
      --rotation: 72;
    }

    .in-and-out div div:nth-child(2) {
      --rotation: 144;
    }

    .in-and-out div div:nth-child(3) {
      --rotation: 216;
    }

    .in-and-out div div:nth-child(4) {
      --rotation: 288;
    }

    .in-and-out div div:nth-child(5) {
      --rotation: 360;
    }
  }

  .loading-21 {
    .infinity-path {
      --size: 60;
      --speed: 0.65;
      height: calc(var(--size) * 1px);
      position: relative;
      width: calc(var(--size) * 1px);
    }

    .infinity-path > div {
      height: calc(var(--size) * 1px);
      width: calc(var(--size) * 1px);
      border-radius: 100%;
      border: calc(var(--size) / 4 * 1px) solid rgba(255, 255, 255, 0.05);
      position: absolute;
      top: 0;
      left: 0;
      -webkit-animation-duration: calc(var(--speed) * 1s);
      animation-duration: calc(var(--speed) * 1s);
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-name: infinity-spin;
      animation-name: infinity-spin;
      -webkit-transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2) * 1px), 0);
      transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2) * 1px), 0);
    }

    .infinity-path > div:before {
      content: '';
      height: calc(var(--size) / 4 * 1px);
      width: calc(var(--size) / 4 * 1px);
      border-radius: 100%;
      background: var(--primary);
      position: absolute;
      top: 50%;
      animation: infinity-vanish calc(var(--speed) * 2s) infinite reverse steps(1);
      -webkit-transform: translate(calc(var(--translate-2) * 2px), calc(var(--translate) * 1%));
      transform: translate(calc(var(--translate-2) * 2px), calc(var(--translate) * 1%));
    }

    .infinity-path > div:nth-of-type(1) {
      --translate: -50;
      --translate-2: calc(var(--size) / 8);
    }

    .infinity-path > div:nth-of-type(1):before {
      right: 0;
    }

    .infinity-path > div:nth-of-type(2) {
      --translate: 50;
      --translate-2: calc(var(--size) / 8 * -1);
      -webkit-animation-delay: calc(var(--speed) * 1s);
      animation-delay: calc(var(--speed) * 1s);
      animation-direction: reverse;
    }

    .infinity-path > div:nth-of-type(2):before {
      left: 0;
      -webkit-transform: translate(calc(var(--size) / 4 * -1px), -50%);
      transform: translate(calc(var(--size) / 4 * -1px), -50%);
      -webkit-animation-direction: normal;
      animation-direction: normal;
    }

    @-webkit-keyframes infinity-vanish {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }

    @keyframes infinity-vanish {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }

    @-webkit-keyframes infinity-spin {
      from {
        -webkit-transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2) * 1px), 0) rotate(0deg);
        transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2) * 1px), 0) rotate(0deg);
      }
      to {
        -webkit-transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2) * 1px), 0) rotate(360deg);
        transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2) * 1px), 0) rotate(360deg);
      }
    }

    @keyframes infinity-spin {
      from {
        -webkit-transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2) * 1px), 0) rotate(0deg);
        transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2) * 1px), 0) rotate(0deg);
      }
      to {
        -webkit-transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2) * 1px), 0) rotate(360deg);
        transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2) * 1px), 0) rotate(360deg);
      }
    }
  }

  .loading-22 {
    @-webkit-keyframes meetup {
      0%, 100% {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translateY(0);
        transform: rotate(calc(var(--rotation) * 1deg)) translateY(0);
      }
      50% {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translateY(300%);
        transform: rotate(calc(var(--rotation) * 1deg)) translateY(300%);
      }
    }
    @keyframes meetup {
      0%, 100% {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translateY(0);
        transform: rotate(calc(var(--rotation) * 1deg)) translateY(0);
      }
      50% {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translateY(300%);
        transform: rotate(calc(var(--rotation) * 1deg)) translateY(300%);
      }
    }

    .meetup {
      -webkit-animation: spin 1s infinite linear;
      animation: spin 1s infinite linear;
      height: 10px;
      width: 10px;
    }

    .meetup div {
      height: 100%;
      position: absolute;
      width: 100%;
      -webkit-animation: meetup 1.25s infinite ease;
      animation: meetup 1.25s infinite ease;
      background: var(--primary);
      border-radius: 100%;
    }

    .meetup div:nth-child(1) {
      --rotation: 90;
    }

    .meetup div:nth-child(2) {
      --rotation: 180;
    }

    .meetup div:nth-child(3) {
      --rotation: 270;
    }

    .meetup div:nth-child(4) {
      --rotation: 360;
    }

    @-webkit-keyframes spin {
      to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes spin {
      to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
  }

  .loading-23 {
    @-webkit-keyframes orbit-star {
      0% {
        -webkit-transform: rotate(0deg) scale(var(--scale));
        transform: rotate(0deg) scale(var(--scale))
      }

      to {
        -webkit-transform: rotate(-1turn) scale(var(--scale));
        transform: rotate(-1turn) scale(var(--scale))
      }
    }

    @keyframes orbit-star {
      0% {
        -webkit-transform: rotate(0deg) scale(var(--scale));
        transform: rotate(0deg) scale(var(--scale))
      }

      to {
        -webkit-transform: rotate(-1turn) scale(var(--scale));
        transform: rotate(-1turn) scale(var(--scale))
      }
    }

    .orbit-star, .orbit-star > div {
      --scale: 1;
      height: 100px;
      width: 100px;
      position: relative;
      -webkit-animation: orbit-star 9s linear infinite;
      animation: orbit-star 9s linear infinite
    }

    .orbit-star:before, .orbit-star > div:before {
      content: "";
      display: block;
      height: 100px;
      width: 50px;
      background: transparent;
      border-radius: 50px 0 0 50px;
      border: none;
      border-bottom: 5px solid var(--primary);
      border-left: 2px solid var(--primary);
      border-top: 0 solid var(--primary);
      opacity: .3
    }

    .orbit-star:after, .orbit-star > div:after {
      content: "";
      position: absolute;
      display: block;
      top: 38px;
      left: 38px;
      height: 24px;
      width: 24px;
      background: var(--primary);
      border-radius: 16.66667px
    }

    .orbit-star > div:first-child {
      position: absolute;
      top: 25px;
      left: 25px;
      width: 50px;
      height: 50px;
      -webkit-animation: orbit-star 7s linear infinite;
      animation: orbit-star 7s linear infinite
    }

    .orbit-star > div:first-child:before {
      height: 50px;
      width: 25px;
      border-bottom: 4px solid var(--primary);
      border-left: 2px solid var(--primary)
    }

    .orbit-star > div:first-child:after {
      top: 44px;
      left: 22px;
      width: 8.33333px;
      height: 8.33333px;
      background: var(--secondary)
    }

    .orbit-star > div:nth-child(2) {
      --scale: .333;
      top: -52.5%
    }

    .orbit-star > div:nth-child(2):before {
      border-bottom: 12.5px solid var(--primary);
      border-left: 3.33333px solid var(--primary)
    }

    .orbit-star > div:nth-child(2):after {
      top: 29px;
      left: 29px;
      width: 42px;
      height: 42px;
      border-radius: 29px;
      background: var(--secondary)
    }

    .orbit-star > div:nth-child(2) > div {
      position: absolute;
      background: var(--secondary);
      width: 20px;
      height: 20px;
      bottom: -5.55556px;
      left: 40px;
      border-radius: 10px
    }
  }

  .loading-24 {
    @-webkit-keyframes pan-out-circle {
      0%, 30%, 50%, 100% {
        -webkit-transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 0px)) scale(0);
        transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 0px)) scale(0);
      }
      40% {
        -webkit-transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(1);
        transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(1);
      }
    }
    @keyframes pan-out-circle {
      0%, 30%, 50%, 100% {
        -webkit-transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 0px)) scale(0);
        transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 0px)) scale(0);
      }
      40% {
        -webkit-transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(1);
        transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 1px)) scale(1);
      }
    }

    .pan-out-circle {
      --radius: 30;
      --size: 15;
      height: calc(var(--size) * 1px);
      width: calc(var(--size) * 1px);
      position: absolute;
    }

    .pan-out-circle div {
      -webkit-animation: pan-out-circle 1.5s calc(var(--delay) * 1s) infinite ease;
      animation: pan-out-circle 1.5s calc(var(--delay) * 1s) infinite ease;
      background: var(--primary);
      border-radius: 100%;
      height: 100%;
      position: absolute;
      -webkit-transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 0px));
      transform: rotate(calc(var(--angle) * 1deg)) translate(0, calc(var(--radius) * 0px));
      width: 100%;
    }

    .pan-out-circle div:nth-child(1) {
      --angle: 45;
      --delay: 0.1;
    }

    .pan-out-circle div:nth-child(2) {
      --angle: 90;
      --delay: 0.2;
    }

    .pan-out-circle div:nth-child(3) {
      --angle: 135;
      --delay: 0.3;
    }

    .pan-out-circle div:nth-child(4) {
      --angle: 180;
      --delay: 0.4;
    }

    .pan-out-circle div:nth-child(5) {
      --angle: 225;
      --delay: 0.5;
    }

    .pan-out-circle div:nth-child(6) {
      --angle: 270;
      --delay: 0.6;
    }

    .pan-out-circle div:nth-child(7) {
      --angle: 315;
      --delay: 0.7;
    }

    .pan-out-circle div:nth-child(8) {
      --angle: 360;
      --delay: 0.8;
    }
  }

  .loading-25 {
    .pong {
      background: repeating-linear-gradient(180deg, var(--primary) 0, var(--primary) 4%, transparent 4%, transparent 6%, var(--primary) 6%) 49px 0/2px 100% no-repeat;
      height: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 100px;
    }

    .pong div {
      content: -850 741, 850 812, -850 -615, 850 437, -850 655, 850 -117, -850 -345, 850 -515, -850 -55, 850 562, -850 556, 850 819, -850 590, 850 384, -850 -854, 850 -27, -850 215, 850 921, -850 13, 850 -79, -850 213, 850 -602, -850 -763, 850 -660;
    }

    .pong div:nth-child(1) {
      -webkit-animation: play 6s infinite linear alternate;
      animation: play 6s infinite linear alternate;
      background: var(--primary);
      height: 5%;
      left: 50%;
      position: absolute;
      top: 50%;
      width: 5%;
      will-change: transform;
      z-index: 2;
      content: -850 741;
    }

    .pong div:nth-child(2), .pong div:nth-child(3) {
      -webkit-animation-direction: alternate;
      animation-direction: alternate;
      -webkit-animation-duration: 6s;
      animation-duration: 6s;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
      background: var(--primary);
      height: 15%;
      position: absolute;
      top: 50%;
      width: 5%;
      will-change: transform;
    }

    .pong div:nth-child(2) {
      -webkit-animation-name: moveOne;
      animation-name: moveOne;
      left: 0;
    }

    .pong div:nth-child(3) {
      -webkit-animation-name: moveTwo;
      animation-name: moveTwo;
      right: 0;
    }

    @-webkit-keyframes play {
      0% {
        -webkit-transform: translate(-50%, -50%) translate(-850%, 741%);
        transform: translate(-50%, -50%) translate(-850%, 741%);
      }
      10% {
        -webkit-transform: translate(-50%, -50%) translate(850%, 812%);
        transform: translate(-50%, -50%) translate(850%, 812%);
      }
      20% {
        -webkit-transform: translate(-50%, -50%) translate(-850%, -615%);
        transform: translate(-50%, -50%) translate(-850%, -615%);
      }
      30% {
        -webkit-transform: translate(-50%, -50%) translate(850%, 437%);
        transform: translate(-50%, -50%) translate(850%, 437%);
      }
      40% {
        -webkit-transform: translate(-50%, -50%) translate(-850%, 655%);
        transform: translate(-50%, -50%) translate(-850%, 655%);
      }
      50% {
        -webkit-transform: translate(-50%, -50%) translate(850%, -117%);
        transform: translate(-50%, -50%) translate(850%, -117%);
      }
      60% {
        -webkit-transform: translate(-50%, -50%) translate(-850%, -345%);
        transform: translate(-50%, -50%) translate(-850%, -345%);
      }
      70% {
        -webkit-transform: translate(-50%, -50%) translate(850%, -515%);
        transform: translate(-50%, -50%) translate(850%, -515%);
      }
      80% {
        -webkit-transform: translate(-50%, -50%) translate(-850%, -55%);
        transform: translate(-50%, -50%) translate(-850%, -55%);
      }
      90% {
        -webkit-transform: translate(-50%, -50%) translate(850%, 562%);
        transform: translate(-50%, -50%) translate(850%, 562%);
      }
      100% {
        -webkit-transform: translate(-50%, -50%) translate(-850%, 741%);
        transform: translate(-50%, -50%) translate(-850%, 741%);
      }
    }

    @keyframes play {
      0% {
        -webkit-transform: translate(-50%, -50%) translate(-850%, 741%);
        transform: translate(-50%, -50%) translate(-850%, 741%);
      }
      10% {
        -webkit-transform: translate(-50%, -50%) translate(850%, 812%);
        transform: translate(-50%, -50%) translate(850%, 812%);
      }
      20% {
        -webkit-transform: translate(-50%, -50%) translate(-850%, -615%);
        transform: translate(-50%, -50%) translate(-850%, -615%);
      }
      30% {
        -webkit-transform: translate(-50%, -50%) translate(850%, 437%);
        transform: translate(-50%, -50%) translate(850%, 437%);
      }
      40% {
        -webkit-transform: translate(-50%, -50%) translate(-850%, 655%);
        transform: translate(-50%, -50%) translate(-850%, 655%);
      }
      50% {
        -webkit-transform: translate(-50%, -50%) translate(850%, -117%);
        transform: translate(-50%, -50%) translate(850%, -117%);
      }
      60% {
        -webkit-transform: translate(-50%, -50%) translate(-850%, -345%);
        transform: translate(-50%, -50%) translate(-850%, -345%);
      }
      70% {
        -webkit-transform: translate(-50%, -50%) translate(850%, -515%);
        transform: translate(-50%, -50%) translate(850%, -515%);
      }
      80% {
        -webkit-transform: translate(-50%, -50%) translate(-850%, -55%);
        transform: translate(-50%, -50%) translate(-850%, -55%);
      }
      90% {
        -webkit-transform: translate(-50%, -50%) translate(850%, 562%);
        transform: translate(-50%, -50%) translate(850%, 562%);
      }
      100% {
        -webkit-transform: translate(-50%, -50%) translate(-850%, 741%);
        transform: translate(-50%, -50%) translate(-850%, 741%);
      }
    }

    @-webkit-keyframes moveOne {
      0% {
        -webkit-transform: translate(0%, -50%) translate(0%, 247%);
        transform: translate(0%, -50%) translate(0%, 247%);
      }
      20%, 30% {
        -webkit-transform: translate(0%, -50%) translate(0%, -205%);
        transform: translate(0%, -50%) translate(0%, -205%);
      }
      40%, 50% {
        -webkit-transform: translate(0%, -50%) translate(0%, 218.33333%);
        transform: translate(0%, -50%) translate(0%, 218.33333%);
      }
      60%, 70% {
        -webkit-transform: translate(0%, -50%) translate(0%, -115%);
        transform: translate(0%, -50%) translate(0%, -115%);
      }
      80%, 90% {
        -webkit-transform: translate(0%, -50%) translate(0%, -18.33333%);
        transform: translate(0%, -50%) translate(0%, -18.33333%);
      }
      100% {
        -webkit-transform: translate(0%, -50%) translate(0%, 247%);
        transform: translate(0%, -50%) translate(0%, 247%);
      }
    }

    @keyframes moveOne {
      0% {
        -webkit-transform: translate(0%, -50%) translate(0%, 247%);
        transform: translate(0%, -50%) translate(0%, 247%);
      }
      20%, 30% {
        -webkit-transform: translate(0%, -50%) translate(0%, -205%);
        transform: translate(0%, -50%) translate(0%, -205%);
      }
      40%, 50% {
        -webkit-transform: translate(0%, -50%) translate(0%, 218.33333%);
        transform: translate(0%, -50%) translate(0%, 218.33333%);
      }
      60%, 70% {
        -webkit-transform: translate(0%, -50%) translate(0%, -115%);
        transform: translate(0%, -50%) translate(0%, -115%);
      }
      80%, 90% {
        -webkit-transform: translate(0%, -50%) translate(0%, -18.33333%);
        transform: translate(0%, -50%) translate(0%, -18.33333%);
      }
      100% {
        -webkit-transform: translate(0%, -50%) translate(0%, 247%);
        transform: translate(0%, -50%) translate(0%, 247%);
      }
    }

    @-webkit-keyframes moveTwo {
      0% {
        content: 850 812;
        -webkit-transform: translate(0%, -50%) translate(0%, 270.66667%);
        transform: translate(0%, -50%) translate(0%, 270.66667%);
      }
      20%, 10% {
        -webkit-transform: translate(0%, -50%) translate(0%, 270.66667%);
        transform: translate(0%, -50%) translate(0%, 270.66667%);
      }
      40%, 30% {
        -webkit-transform: translate(0%, -50%) translate(0%, 145.66667%);
        transform: translate(0%, -50%) translate(0%, 145.66667%);
      }
      60%, 50% {
        -webkit-transform: translate(0%, -50%) translate(0%, -39%);
        transform: translate(0%, -50%) translate(0%, -39%);
      }
      80%, 70% {
        -webkit-transform: translate(0%, -50%) translate(0%, -171.66667%);
        transform: translate(0%, -50%) translate(0%, -171.66667%);
      }
      100%, 90% {
        -webkit-transform: translate(0%, -50%) translate(0%, 187.33333%);
        transform: translate(0%, -50%) translate(0%, 187.33333%);
      }
    }

    @keyframes moveTwo {
      0% {
        content: 850 812;
        -webkit-transform: translate(0%, -50%) translate(0%, 270.66667%);
        transform: translate(0%, -50%) translate(0%, 270.66667%);
      }
      20%, 10% {
        -webkit-transform: translate(0%, -50%) translate(0%, 270.66667%);
        transform: translate(0%, -50%) translate(0%, 270.66667%);
      }
      40%, 30% {
        -webkit-transform: translate(0%, -50%) translate(0%, 145.66667%);
        transform: translate(0%, -50%) translate(0%, 145.66667%);
      }
      60%, 50% {
        -webkit-transform: translate(0%, -50%) translate(0%, -39%);
        transform: translate(0%, -50%) translate(0%, -39%);
      }
      80%, 70% {
        -webkit-transform: translate(0%, -50%) translate(0%, -171.66667%);
        transform: translate(0%, -50%) translate(0%, -171.66667%);
      }
      100%, 90% {
        -webkit-transform: translate(0%, -50%) translate(0%, 187.33333%);
        transform: translate(0%, -50%) translate(0%, 187.33333%);
      }
    }
  }

  .loading-26 {
    .push-out {
      --duration: .85;
      height: 100px;
      width: 100px;
      position: relative;
      overflow: hidden
    }

    .push-out > div:first-of-type {
      height: 20px;
      width: 20px;
      position: absolute;
      -webkit-animation: push-out-slide calc(var(--duration) * 1s) infinite alternate ease-in-out;
      animation: push-out-slide calc(var(--duration) * 1s) infinite alternate ease-in-out;
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
      top: 100%;
      left: 0
    }

    .push-out > div:first-of-type:after {
      -webkit-animation: push-out-flip calc(var(--duration) * 1s) infinite alternate ease-in-out;
      animation: push-out-flip calc(var(--duration) * 1s) infinite alternate ease-in-out;
      background: var(--primary);
      content: "";
      height: 100%;
      position: absolute;
      width: 100%
    }

    .push-out > div:nth-of-type(2) {
      background: var(--primary);
      height: 30px;
      left: 50%;
      position: absolute;
      top: 100%;
      -webkit-transform: translate(-50%, -100%);
      transform: translate(-50%, -100%);
      width: 20px
    }

    .push-out:after, .push-out:before {
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-duration: calc(var(--duration) * 4s);
      animation-duration: calc(var(--duration) * 4s);
      background: var(--primary);
      bottom: 0;
      content: "";
      height: 40px;
      position: absolute;
      width: 20px
    }

    .push-out:after {
      -webkit-animation-name: push-out-pushed-1;
      animation-name: push-out-pushed-1;
      right: 0
    }

    .push-out:before {
      -webkit-animation-name: push-out-pushed-2;
      animation-name: push-out-pushed-2;
      left: 0
    }

    @-webkit-keyframes push-out-pushed-1 {
      0%, 18.125%, 50%, 68.125%, to {
        -webkit-transform: translate(0);
        transform: translate(0)
      }

      25%, 43.125%, 75%, 93.125% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
      }
    }

    @keyframes push-out-pushed-1 {
      0%, 18.125%, 50%, 68.125%, to {
        -webkit-transform: translate(0);
        transform: translate(0)
      }

      25%, 43.125%, 75%, 93.125% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
      }
    }

    @-webkit-keyframes push-out-pushed-2 {
      0%, 18.125%, 50%, 68.125%, to {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
      }

      25%, 43.125%, 75%, 93.125% {
        -webkit-transform: translate(0);
        transform: translate(0)
      }
    }

    @keyframes push-out-pushed-2 {
      0%, 18.125%, 50%, 68.125%, to {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
      }

      25%, 43.125%, 75%, 93.125% {
        -webkit-transform: translate(0);
        transform: translate(0)
      }
    }

    @-webkit-keyframes push-out-flip {
      0% {
        -webkit-transform: translate(0) rotate(0deg);
        transform: translate(0) rotate(0deg)
      }

      50% {
        -webkit-transform: translateY(-80px) rotate(90deg);
        transform: translateY(-80px) rotate(90deg)
      }

      to {
        -webkit-transform: translate(0) rotate(180deg);
        transform: translate(0) rotate(180deg)
      }
    }

    @keyframes push-out-flip {
      0% {
        -webkit-transform: translate(0) rotate(0deg);
        transform: translate(0) rotate(0deg)
      }

      50% {
        -webkit-transform: translateY(-80px) rotate(90deg);
        transform: translateY(-80px) rotate(90deg)
      }

      to {
        -webkit-transform: translate(0) rotate(180deg);
        transform: translate(0) rotate(180deg)
      }
    }

    @-webkit-keyframes push-out-slide {
      to {
        -webkit-transform: translateY(-100%) translate(80px);
        transform: translateY(-100%) translate(80px)
      }
    }

    @keyframes push-out-slide {
      to {
        -webkit-transform: translateY(-100%) translate(80px);
        transform: translateY(-100%) translate(80px)
      }
    }
  }

  .loading-27 {
    .push-pop {
      --duration: .85;
      height: 100px;
      width: 100px;
      position: relative;
      overflow: hidden
    }

    .push-pop > div:first-of-type {
      height: 20px;
      width: 20px;
      position: absolute;
      -webkit-animation: push-pop-slide calc(var(--duration) * 1s) infinite alternate ease-in-out;
      animation: push-pop-slide calc(var(--duration) * 1s) infinite alternate ease-in-out;
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
      top: 100%;
      left: 0
    }

    .push-pop > div:first-of-type:after {
      -webkit-animation: push-pop-flip calc(var(--duration) * 1s) infinite alternate ease-in-out;
      animation: push-pop-flip calc(var(--duration) * 1s) infinite alternate ease-in-out;
      background: var(--primary);
      content: "";
      height: 100%;
      position: absolute;
      width: 100%
    }

    .push-pop > div:nth-of-type(2) {
      background: var(--primary);
      height: 30px;
      left: 50%;
      position: absolute;
      top: 100%;
      -webkit-transform: translate(-50%, -100%);
      transform: translate(-50%, -100%);
      width: 20px
    }

    .push-pop:after, .push-pop:before {
      -webkit-animation-name: push-pop-pushed;
      animation-name: push-pop-pushed;
      -webkit-animation-duration: calc(var(--duration) * 1s);
      animation-duration: calc(var(--duration) * 1s);
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease;
      background: var(--primary);
      bottom: 0;
      content: "";
      height: 40px;
      position: absolute;
      width: 20px
    }

    .push-pop:before {
      animation-direction: alternate-reverse;
      left: 0
    }

    .push-pop:after {
      -webkit-animation-direction: alternate;
      animation-direction: alternate;
      right: 0
    }

    @-webkit-keyframes push-pop-pushed {
      0%, 72.5% {
        -webkit-transform: translate(0);
        transform: translate(0)
      }

      to {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
      }
    }

    @keyframes push-pop-pushed {
      0%, 72.5% {
        -webkit-transform: translate(0);
        transform: translate(0)
      }

      to {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
      }
    }

    @-webkit-keyframes push-pop-flip {
      0% {
        -webkit-transform: translate(0) rotate(0deg);
        transform: translate(0) rotate(0deg)
      }

      50% {
        -webkit-transform: translateY(-80px) rotate(90deg);
        transform: translateY(-80px) rotate(90deg)
      }

      to {
        -webkit-transform: translate(0) rotate(180deg);
        transform: translate(0) rotate(180deg)
      }
    }

    @keyframes push-pop-flip {
      0% {
        -webkit-transform: translate(0) rotate(0deg);
        transform: translate(0) rotate(0deg)
      }

      50% {
        -webkit-transform: translateY(-80px) rotate(90deg);
        transform: translateY(-80px) rotate(90deg)
      }

      to {
        -webkit-transform: translate(0) rotate(180deg);
        transform: translate(0) rotate(180deg)
      }
    }

    @-webkit-keyframes push-pop-slide {
      to {
        -webkit-transform: translateY(-100%) translate(80px);
        transform: translateY(-100%) translate(80px)
      }
    }

    @keyframes push-pop-slide {
      to {
        -webkit-transform: translateY(-100%) translate(80px);
        transform: translateY(-100%) translate(80px)
      }
    }
  }

  .loading-28 {
    @-webkit-keyframes reach {
      0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, to {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translateY(calc(var(--translation) * 1%));
        transform: rotate(calc(var(--rotation) * 1deg)) translateY(calc(var(--translation) * 1%))
      }

      50% {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translateY(calc(var(--translation) * 1.5%));
        transform: rotate(calc(var(--rotation) * 1deg)) translateY(calc(var(--translation) * 1.5%))
      }
    }

    @keyframes reach {
      0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, to {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translateY(calc(var(--translation) * 1%));
        transform: rotate(calc(var(--rotation) * 1deg)) translateY(calc(var(--translation) * 1%))
      }

      50% {
        -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translateY(calc(var(--translation) * 1.5%));
        transform: rotate(calc(var(--rotation) * 1deg)) translateY(calc(var(--translation) * 1.5%))
      }
    }

    .reach {
      --size: 10;
      height: calc(var(--size) * 1px);
      width: calc(var(--size) * 1px);
      position: absolute
    }

    .reach div {
      -webkit-animation: reach 1s calc(var(--delay) * 1s) infinite ease;
      animation: reach 1s calc(var(--delay) * 1s) infinite ease;
      width: 50%;
      height: 150%;
      background: var(--primary);
      position: absolute;
      -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translateY(calc(var(--translation) * 1%));
      transform: rotate(calc(var(--rotation) * 1deg)) translateY(calc(var(--translation) * 1%))
    }

    .reach div:first-child {
      --delay: 0.1;
      --rotation: 36;
      --translation: 150
    }

    .reach div:nth-child(2) {
      --delay: 0.2;
      --rotation: 72;
      --translation: 150
    }

    .reach div:nth-child(3) {
      --delay: 0.3;
      --rotation: 108;
      --translation: 150
    }

    .reach div:nth-child(4) {
      --delay: 0.4;
      --rotation: 144;
      --translation: 150
    }

    .reach div:nth-child(5) {
      --delay: 0.5;
      --rotation: 180;
      --translation: 150
    }

    .reach div:nth-child(6) {
      --delay: 0.6;
      --rotation: 216;
      --translation: 150
    }

    .reach div:nth-child(7) {
      --delay: 0.7;
      --rotation: 252;
      --translation: 150
    }

    .reach div:nth-child(8) {
      --delay: 0.8;
      --rotation: 288;
      --translation: 150
    }

    .reach div:nth-child(9) {
      --delay: 0.9;
      --rotation: 324;
      --translation: 150
    }

    .reach div:nth-child(10) {
      --delay: 1;
      --rotation: 360;
      --translation: 150
    }
  }

  .loading-29 {
    @-webkit-keyframes spin {
      to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
      }
    }

    @keyframes spin {
      to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
      }
    }

    .ring-of-stars {
      -webkit-animation: spin 1.25s linear infinite;
      animation: spin 1.25s linear infinite;
      height: 50px;
      position: relative;
      width: 50px
    }

    .ring-of-stars div {
      border-bottom: 9.6px solid var(--primary);
      border-left: 3.2px solid transparent;
      border-right: 3.2px solid transparent;
      height: 0;
      position: relative;
      width: 0;
      left: 50%;
      position: absolute;
      top: 50%;
      -webkit-transform-origin: center 9.6px;
      transform-origin: center 9.6px
    }

    .ring-of-stars div:after, .ring-of-stars div:before {
      border-bottom: 6.4px solid var(--primary);
      border-left: 9.6px solid transparent;
      border-right: 9.6px solid transparent;
      content: "";
      display: block;
      height: 0;
      position: absolute;
      width: 0
    }

    .ring-of-stars div:after {
      -webkit-transform: translate(-9.6px, 6.4px) rotate(-35deg);
      transform: translate(-9.6px, 6.4px) rotate(-35deg)
    }

    .ring-of-stars div:before {
      -webkit-transform: translate(-9.6px, 6.4px) rotate(35deg);
      transform: translate(-9.6px, 6.4px) rotate(35deg)
    }

    .ring-of-stars div:first-child {
      -webkit-transform: translate(-50%, -9.6px) rotate(51.42857deg) translateY(400%);
      transform: translate(-50%, -9.6px) rotate(51.42857deg) translateY(400%)
    }

    .ring-of-stars div:nth-child(2) {
      -webkit-transform: translate(-50%, -9.6px) rotate(102.85714deg) translateY(400%);
      transform: translate(-50%, -9.6px) rotate(102.85714deg) translateY(400%)
    }

    .ring-of-stars div:nth-child(3) {
      -webkit-transform: translate(-50%, -9.6px) rotate(154.28571deg) translateY(400%);
      transform: translate(-50%, -9.6px) rotate(154.28571deg) translateY(400%)
    }

    .ring-of-stars div:nth-child(4) {
      -webkit-transform: translate(-50%, -9.6px) rotate(205.71429deg) translateY(400%);
      transform: translate(-50%, -9.6px) rotate(205.71429deg) translateY(400%)
    }

    .ring-of-stars div:nth-child(5) {
      -webkit-transform: translate(-50%, -9.6px) rotate(257.14286deg) translateY(400%);
      transform: translate(-50%, -9.6px) rotate(257.14286deg) translateY(400%)
    }

    .ring-of-stars div:nth-child(6) {
      -webkit-transform: translate(-50%, -9.6px) rotate(308.57143deg) translateY(400%);
      transform: translate(-50%, -9.6px) rotate(308.57143deg) translateY(400%)
    }

    .ring-of-stars div:nth-child(7) {
      -webkit-transform: translate(-50%, -9.6px) rotate(1turn) translateY(400%);
      transform: translate(-50%, -9.6px) rotate(1turn) translateY(400%)
    }
  }

  .loading-30 {
    @-webkit-keyframes rotating-dots {
      0% {
        -webkit-transform: translate(calc(var(--translate) * 1%)) rotateY(0deg) rotate(0deg);
        transform: translate(calc(var(--translate) * 1%)) rotateY(0deg) rotate(0deg);
        -webkit-transform: translate(calc(var(--translate) * 1%)) rotateY(calc(var(--rotation, 0) * 1deg)) rotate(0deg);
        transform: translate(calc(var(--translate) * 1%)) rotateY(calc(var(--rotation, 0) * 1deg)) rotate(0deg)
      }

      50%, to {
        -webkit-transform: translate(calc(var(--translate) * 1%)) rotateY(0deg) rotate(180deg);
        transform: translate(calc(var(--translate) * 1%)) rotateY(0deg) rotate(180deg);
        -webkit-transform: translate(calc(var(--translate) * 1%)) rotateY(calc(var(--rotation, 0) * 1deg)) rotate(180deg);
        transform: translate(calc(var(--translate) * 1%)) rotateY(calc(var(--rotation, 0) * 1deg)) rotate(180deg)
      }
    }

    @keyframes rotating-dots {
      0% {
        -webkit-transform: translate(calc(var(--translate) * 1%)) rotateY(0deg) rotate(0deg);
        transform: translate(calc(var(--translate) * 1%)) rotateY(0deg) rotate(0deg);
        -webkit-transform: translate(calc(var(--translate) * 1%)) rotateY(calc(var(--rotation, 0) * 1deg)) rotate(0deg);
        transform: translate(calc(var(--translate) * 1%)) rotateY(calc(var(--rotation, 0) * 1deg)) rotate(0deg)
      }

      50%, to {
        -webkit-transform: translate(calc(var(--translate) * 1%)) rotateY(0deg) rotate(180deg);
        transform: translate(calc(var(--translate) * 1%)) rotateY(0deg) rotate(180deg);
        -webkit-transform: translate(calc(var(--translate) * 1%)) rotateY(calc(var(--rotation, 0) * 1deg)) rotate(180deg);
        transform: translate(calc(var(--translate) * 1%)) rotateY(calc(var(--rotation, 0) * 1deg)) rotate(180deg)
      }
    }

    @-webkit-keyframes rotating-dots-flash {
      0%, 50% {
        visibility: visible
      }

      50.0001%, to {
        visibility: hidden
      }
    }

    @keyframes rotating-dots-flash {
      0%, 50% {
        visibility: visible
      }

      50.0001%, to {
        visibility: hidden
      }
    }

    .rotating-dots {
      --duration: 1;
      --size: 20;
      height: calc(var(--size) * 1px);
      position: absolute;
      width: calc(var(--size) * 1px)
    }

    .rotating-dots div {
      -webkit-animation: rotating-dots calc(var(--duration) * 1s) 0s infinite;
      animation: rotating-dots calc(var(--duration) * 1s) 0s infinite;
      -webkit-animation: rotating-dots calc(var(--duration) * 1s) calc(var(--delay, 0) * 1s) infinite;
      animation: rotating-dots calc(var(--duration) * 1s) calc(var(--delay, 0) * 1s) infinite;
      height: 100%;
      position: absolute;
      -webkit-transform: translate(calc(var(--translate) * 1%));
      transform: translate(calc(var(--translate) * 1%));
      width: 100%
    }

    .rotating-dots div:after, .rotating-dots div:before {
      background: var(--primary);
      border-radius: 100%;
      content: "";
      height: 100%;
      position: absolute;
      width: 100%
    }

    .rotating-dots div:after {
      -webkit-animation: rotating-dots-flash calc(var(--duration) * 1s) 0s infinite steps(2);
      animation: rotating-dots-flash calc(var(--duration) * 1s) 0s infinite steps(2);
      -webkit-animation: rotating-dots-flash calc(var(--duration) * 1s) calc(var(--delay, 0) * 1s) infinite steps(2);
      animation: rotating-dots-flash calc(var(--duration) * 1s) calc(var(--delay, 0) * 1s) infinite steps(2);
      -webkit-transform: translate(-100%);
      transform: translate(-100%)
    }

    .rotating-dots div:before {
      -webkit-transform: translate(100%);
      transform: translate(100%)
    }

    .rotating-dots div:first-of-type {
      --translate: -100
    }

    .rotating-dots div:nth-of-type(2) {
      --delay: calc(var(--duration) / 2 * -1);
      --rotation: 180;
      --translate: 100
    }
  }

  .loading-30 {
    @-webkit-keyframes scaling-circle {
      0%, 30%, 50%, to {
        -webkit-transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) scale(1);
        transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) scale(1)
      }

      40% {
        -webkit-transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) scale(0);
        transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) scale(0)
      }
    }

    @keyframes scaling-circle {
      0%, 30%, 50%, to {
        -webkit-transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) scale(1);
        transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) scale(1)
      }

      40% {
        -webkit-transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) scale(0);
        transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) scale(0)
      }
    }

    .scaling-circle {
      --radius: 25;
      --size: 10;
      height: calc(var(--size) * 1px);
      width: calc(var(--size) * 1px);
      position: absolute
    }

    .scaling-circle div {
      height: 100%;
      width: 100%;
      position: absolute;
      border-radius: 100%;
      background: var(--primary);
      -webkit-animation: scaling-circle .8s calc(var(--delay) * 1s) infinite ease;
      animation: scaling-circle .8s calc(var(--delay) * 1s) infinite ease;
      -webkit-transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px));
      transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px))
    }

    .scaling-circle div:first-child {
      --angle: 45;
      --delay: 0.1
    }

    .scaling-circle div:nth-child(2) {
      --angle: 90;
      --delay: 0.2
    }

    .scaling-circle div:nth-child(3) {
      --angle: 135;
      --delay: 0.3
    }

    .scaling-circle div:nth-child(4) {
      --angle: 180;
      --delay: 0.4
    }

    .scaling-circle div:nth-child(5) {
      --angle: 225;
      --delay: 0.5
    }

    .scaling-circle div:nth-child(6) {
      --angle: 270;
      --delay: 0.6
    }

    .scaling-circle div:nth-child(7) {
      --angle: 315;
      --delay: 0.7
    }

    .scaling-circle div:nth-child(8) {
      --angle: 360;
      --delay: 0.8
    }
  }

  .loading-31 {
    @-webkit-keyframes scaling-dots {
      0%, to {
        -webkit-transform: scale(0);
        transform: scale(0)
      }

      40%, 60% {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
    }

    @keyframes scaling-dots {
      0%, to {
        -webkit-transform: scale(0);
        transform: scale(0)
      }

      40%, 60% {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
    }

    .scaling-dots {
      display: grid;
      height: 10px;
      grid-gap: 5px;
      grid-template-columns: repeat(5, 10px)
    }

    .scaling-dots div {
      -webkit-animation: scaling-dots 1s ease infinite backwards;
      animation: scaling-dots 1s ease infinite backwards;
      background: var(--primary);
      border-radius: 100%;
      height: 10px;
      width: 10px
    }

    .scaling-dots div:first-child {
      -webkit-animation-delay: .1s;
      animation-delay: .1s
    }

    .scaling-dots div:nth-child(2) {
      -webkit-animation-delay: .2s;
      animation-delay: .2s
    }

    .scaling-dots div:nth-child(3) {
      -webkit-animation-delay: .3s;
      animation-delay: .3s
    }

    .scaling-dots div:nth-child(4) {
      -webkit-animation-delay: .4s;
      animation-delay: .4s
    }

    .scaling-dots div:nth-child(5) {
      -webkit-animation-delay: .5s;
      animation-delay: .5s
    }
  }

  .loading-32 {
    @-webkit-keyframes slide-in {
      0% {
        opacity: 0;
        -webkit-transform: translateX(-300%);
        transform: translateX(-300%)
      }

      30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
      }

      to {
        opacity: 0;
        -webkit-transform: translateX(300%);
        transform: translateX(300%)
      }
    }

    @keyframes slide-in {
      0% {
        opacity: 0;
        -webkit-transform: translateX(-300%);
        transform: translateX(-300%)
      }

      30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
      }

      to {
        opacity: 0;
        -webkit-transform: translateX(300%);
        transform: translateX(300%)
      }
    }

    .slide-in div {
      -webkit-animation: slide-in 1.5s infinite;
      animation: slide-in 1.5s infinite;
      background-color: var(--primary);
      height: 20px;
      left: 50%;
      margin-top: -10px;
      opacity: 0;
      position: absolute;
      top: 50%;
      width: 20px
    }

    .slide-in div:first-of-type {
      -webkit-animation-delay: .5s;
      animation-delay: .5s;
      margin-left: -35px
    }

    .slide-in div:nth-of-type(2) {
      -webkit-animation-delay: 1s;
      animation-delay: 1s;
      margin-left: -10px
    }

    .slide-in div:nth-of-type(3) {
      -webkit-animation-delay: 1.5s;
      animation-delay: 1.5s;
      margin-left: 15px
    }
  }

  .loading-33 {
    @-webkit-keyframes waterfall {
      0% {
        opacity: 0;
        -webkit-transform: translateY(-250%);
        transform: translateY(-250%)
      }

      40%, 60% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
      }

      to {
        opacity: 0;
        -webkit-transform: translateY(250%);
        transform: translateY(250%)
      }
    }

    @keyframes waterfall {
      0% {
        opacity: 0;
        -webkit-transform: translateY(-250%);
        transform: translateY(-250%)
      }

      40%, 60% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
      }

      to {
        opacity: 0;
        -webkit-transform: translateY(250%);
        transform: translateY(250%)
      }
    }

    .waterfall div {
      -webkit-animation: waterfall 1.5s infinite;
      animation: waterfall 1.5s infinite;
      background-color: var(--primary);
      height: 20px;
      left: 50%;
      margin-top: -10px;
      opacity: 0;
      position: absolute;
      top: 50%;
      width: 20px
    }

    .waterfall div:first-of-type {
      -webkit-animation-delay: .25s;
      animation-delay: .25s;
      margin-left: -10px
    }

    .waterfall div:nth-of-type(2) {
      -webkit-animation-delay: .5s;
      animation-delay: .5s;
      margin-left: 15px
    }

    .waterfall div:nth-of-type(3) {
      -webkit-animation-delay: .75s;
      animation-delay: .75s;
      margin-left: -35px
    }

    .waterfall div:nth-of-type(4) {
      -webkit-animation-delay: 1s;
      animation-delay: 1s;
      margin-left: 40px
    }

    .waterfall div:nth-of-type(5) {
      -webkit-animation-delay: 1.25s;
      animation-delay: 1.25s;
      margin-left: -60px
    }
  }

  .loading-34 {
    .grow-fade-dots {
      -webkit-animation: mover 1s infinite alternate;
      animation: mover 1s infinite alternate;
      -webkit-transform-origin: bottom center;
      transform-origin: bottom center
    }

    .grow-fade-dots div {
      border-radius: 50%;
      display: inline-block;
      margin: 5px;
      height: 25px;
      width: 25px;
      -webkit-transform: scale(0);
      transform: scale(0);
      -webkit-animation: grow 1.5s linear infinite;
      animation: grow 1.5s linear infinite;
      background-color: #f7e014
    }

    .grow-fade-dots div:nth-of-type(2), .grow-fade-dots div:nth-of-type(4) {
      -webkit-animation-delay: .75s;
      animation-delay: .75s;
      background-color: #017f7b
    }

    @-webkit-keyframes grow {
      50% {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
    }

    @keyframes grow {
      50% {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
    }

    @-webkit-keyframes mover {
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0
      }

      to {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity: 1
      }
    }

    @keyframes mover {
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0
      }

      to {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        opacity: 1
      }
    }
  }

}
</style>
